<template>
  <div
    style="height: 523px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px; margin-top: 10px;">
    <div style="width: 100%;">
      <h4 style="text-align: left; margin-left: -3px;padding: 10px; width: 100%;">
        <sapn style="color: dodgerblue;">符合条件的生产计划总数：13例</sapn>
        <sapn style="margin-left: 14px;">等待条件的生产计划明细总数：14例</sapn>
        <div style="text-align: right; display: inline-block;">
          <input class="input_nav_01" type="button" @click="addpgd()" value="添加派工单"
            :disabled="multipleSelection.length>0?false:true" />
          <input style="display: inline-block;width: 60px;height: 25px;background-color: white;" type="button"
            value="搜索" />
        </div>
      </h4>
      <div style="display: in;">

      </div>
    </div>
    <!-- 设计单编号  产品编号  产品名称  设计人 登记时间  工时总成本  审核  -->
    <div style="background-color: #E9EEF3; height: 452px; margin: 10px; padding: 4px; border-radius: 7px;">
      <template>

        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;height: 400px;"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="计划单编号" width="150">
            <template slot-scope="scope">{{ scope.row.newpro_id }}</template>
          </el-table-column>
          <el-table-column prop="proSige_id" label="产品编号" width="150">
          </el-table-column>
          <el-table-column prop="pName" label="产品名称" width="150">
          </el-table-column>
          <el-table-column prop="num" label="数量" width="150">
          </el-table-column>

          <el-table-column prop="arrayOutList" label="物料出库单编号集合" width="160">
          </el-table-column>
          <el-table-column prop="auditorTime" label="审核时间" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </template>
      <div class="block" style="margin-top: 15px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
          :page-sizes="[1,2,7]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>

    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

    <el-dialog title="制定生产派工单" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <el-form :model="proDisOrder">
        <table id="table_f" border="1">
          <tr>
            <th>工单制定人</th>
            <td>
              <input type="text" v-model="proDisOrder.woderMaker" style="height: 30px; border: none;" />
            </td>
            <th>物料出库单编号集合 </th>
            <td>
              <input type="text" v-model="proDisOrder.arrayOutList" style="height: 30px; border: none;" disabled />
            </td>
          </tr>
          <tr>
            <th>登记人</th>
            <td>
              <input type="text" v-model="proDisOrder.registrant" style="height: 30px; border: none;" />
            </td>
            <th>登记时间 </th>
            <td>
              <input type="text" v-model="proDisOrder.regTime" style="height: 30px; border: none;" disabled />
            </td>
          </tr>
          <tr>
            <th>产品编号</th>
            <td>
              <input type="text" v-model="proDisOrder.proSige_id" style="height: 30px; border: none;" disabled />
            </td>
            <th>产品名称</th>
            <td>
              <input type="text" v-model="proDisOrder.pName" style="height: 30px; border: none;" disabled />
            </td>
          </tr>
          <tr>
            <th>生产单价</th>
            <td>
              <input type="text" v-model="proDisOrder.sumPrice" style="height: 30px; border: none;" disabled />
            </td>
            <th>数量</th>
            <td>
              <input type="text" v-model="proDisOrder.num" style="height: 30px; border: none;" disabled="disabled" />
            </td>
          </tr>
          <tr>
            <th>备注</th>
            <td colspan="3" style="text-align: left;">
              <textarea v-model="proDisOrder.remark"
                style="margin: 0px; height: 100px; width: 610px; border: none;"></textarea>
            </td>
          </tr>
        </table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button style="width: 45px ; height: 35px;" @click="close()">关闭</el-button>
        <el-button style="width:  80px ; height: 35px;" type="primary" @click="addPlan()">添加</el-button>
      </span>
    </el-dialog>



    <el-drawer title="" :visible.sync="drawers" custom-class="color_01" direction="ttb" size="100%"
      :before-close="handleClose">
      <span>生产派工单</span>
      <div class="body_main">
        <div style="padding: 13px;">
          <el-form :model="proDisOrder">
            <el-row>
              <el-col :span="14" style="text-align: left;">
                <span class="span_01">工厂制定人:</span>
                <input v-model="proDisOrder.woderMaker" class="input_01" />
              </el-col>
              <el-col :span="10" style="text-align: right;">
                <span class="span_01">出库单编号:{{this.proDisOrder.arrayOutList}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 8px;">
              <el-col :span="8" style="text-align: left;">
                <span class="span_01">产品编号:{{this.proDisOrder.proSige_id}}</span>

              </el-col>
              <el-col :span="16" style="text-align: right;">
                <span class="span_01">产品名称:{{this.proDisOrder.pName}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 8px;">
              <el-col :span="8" style="text-align: left;">
                <span class="span_01">数量:{{this.proDisOrder.num}}</span>

              </el-col>
              <el-col :span="16" style="text-align: right;">
                <span class="span_01">生产单价:{{this.proDisOrder.sumPrice}}</span>
              </el-col>
            </el-row>
            <el-table border :data="tableData2" tooltip-effect="dark"
              style="width: 100%;margin-top: 26px;overflow: scroll;height: 165px;" size="mini">
              <el-table-column prop="pucess_gid" label="序号" width="172">
              </el-table-column>
              <el-table-column prop="processesName" label="工序名称" width="120">
              </el-table-column>
              <el-table-column prop="processesid" label="工序编号" width="120">
              </el-table-column>
              <el-table-column prop="gongShiNum" label="工时数(小时)" width="120">
              </el-table-column>
              <el-table-column prop="unitGSPrice" label="单位工时成本(元)" width="120">
              </el-table-column>
              <el-table-column prop="gScount" label="工时成本小计(元)" width="120">
              </el-table-column>
              <el-table-column prop="wlcount" label="物料成本小计(元)" width="120">
              </el-table-column>
              <el-table-column label="查看物料" width="120">
                <template slot-scope="scope">
                  <el-button @click="chcekwuliao(scope.row.pucess_gid)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row style="margin-top: 20px;">
              <el-col :span="14" style="text-align: left;">
                <span class="span_01">登记人:</span>
                <input v-model="proDisOrder.registrant" class="input_01" />
              </el-col>
              <el-col :span="10" style="text-align: right;">
                <span class="span_01">登记时间:{{proDisOrder.regTime}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6" style="text-align: left;font-size: 14px;margin-top: 15px;">
                备注
              </el-col>
            </el-row>
            <textarea v-model="proDisOrder.remark"
              style="margin: 0px; width: 914px; height: 83px;margin-top: 6px;"></textarea>
          </el-form>
        </div>
      </div>
      <div style="text-align: right; margin-top: 14px;">
        <span slot="footer" class="dialog-footer">
          <el-button style="width: 45px ; height: 35px;" @click="scjfds()">返回</el-button>
          <el-button style="width:  80px ; height: 35px;" type="primary" @click="scjfd()">添加</el-button>
        </span>
      </div>
    </el-drawer>

    <el-dialog title="工序物料单" :visible.sync="dialogVisible2" width="60%" :before-close="handleClose">
      <el-row>
        <el-col :span="16" style="text-align: left;">
          设计单编号:{{this.pducess_id}}
        </el-col>
        <el-col :span="8" style="text-align: right;">
          工序名称:{{this.processesName}}
        </el-col>
      </el-row>
      <el-table border :data="tableData3" tooltip-effect="dark"
        style="width: 100%;margin-top: 26px;overflow: scroll;height: 165px;" size="mini">
        <el-table-column prop="pName" label="物料名称" width="120">
        </el-table-column>
        <el-table-column prop="wid" label="物料编号" width="120">
        </el-table-column>
        <el-table-column prop="processesNum" label="本工序用量" width="120">
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="120">
        </el-table-column>
        <el-table-column prop="price" label="单价" width="120">
        </el-table-column>
        <el-table-column prop="count" label="小计" width="110">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'repset',
    data() {
      return {
        processesName: '',
        pducess_id: '',
        drawers: false,
        pageNum: 1,
        pageSize: 7,
        total: 0,
        tableData: [],
        tableData2: [],
        tableData3: [],
        dialogVisible: false,
        dialogVisible2: false,
        dialogFormVisible: false,
        multipleSelection: [],

        form: {
          name: '朱星宇'
        },
        formLabelWidth: '120px',
        makepsDto: {
          proDisOrder: {},
          pdoProcess: []
        },
        proDisOrder: {
          scpgd_id: 0,
          newpro_id: 0,
          woderMaker: '', // 工单制定人
          arrayOutList: '', //出库单编号集合
          proSige_id: '', //产品id
          pName: '', //产品名称
          sumPrice: '', //生产单价
          num: '', //数量
          remark: '', //备注,
          regTime: '', //登记时间
          registrant: '', //登记人
          gongShiPrice: 0, //工时总成本
          wuliaoSumPrice: 0,
          thereviewer:'',
          audittime:''
        }
      }
    },
    methods: {
      scjfds() {
        this.drawers = false;
      },
      scjfd() {
        var falg = false;
        this.$confirm('提交, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.makepsDto.proDisOrder = this.proDisOrder;
          this.makepsDto.pdoProcess = this.tableData2;
          this.$http.post('production/product/insertProDisOder', this.$qs.stringify(this.makepsDto, {
            arrayFormat: 'list',
            allowDots: true
          })).then(res => {
            if (res.status === 200) {
              var array = [];
              for (var i = 0; i < this.multipleSelection.length; i++) {
                array.push(this.multipleSelection[i].id);
              }
              var data = new URLSearchParams();
              data.append("id", array);
              this.$http.post('production/productionproduct/UpdateNewxsScjh', data).then(res => {
                if (res.status == 200) {
                  this.$message({
                    type: 'success',
                    message: '已提交! 请审核'
                  });
                  this.GetOnline(this.pageNum, this.pageSize);
                  this.drawers = false;
                  this.dialogVisible = false;
                }
              }).catch(err => {
                console.log(err);
              })
            }
          }).catch(err => {
            console.log(err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      update() {},
      chcekwuliao(pucess_gid) {

        var index = this.tableData2.findIndex(i => {
          if (pucess_gid == i.pucess_gid) {
            return true;
          }
        });
        this.pducess_id = this.tableData2[index].pducess_id;
        this.processesName = this.tableData2[index].processesName;
        this.tableData3 = this.tableData2[index].pdoProcessWuLiaos;
        this.dialogVisible2 = true;
      },
      addPlan() {
        this.$http.post('production/product/productPlanAudit?proSige_id=' + this.proDisOrder.proSige_id).then(res => {
          if (res.data == 1) {
            // this.addPlan_process();
            this.add_new_palan();
            this.drawers = true;
          } else {
            this.$message.error('对不起，该产品的工序设计或工序物料设计尚未完成，不能制定生产派工单');
          }
        }).catch(err => {
          console.log(err);
        })
        // this.dialogVisible = false;
      },
      addPlan_process() {

        var data = new URLSearchParams();
        data.append("proSige_id", this.proDisOrder.proSige_id);
        data.append("num", this.proDisOrder.num);
        this.$http.post('production/product/selwuliao', data).then(res => {
          if (res.data != 1002) {
            this.proDisOrder.arrayOutList = res.data;
            this.add_new_palan();
            this.drawers = true;
          } else {
            this.$message.error('未出库领取物料!!!!');
          }
        }).catch(err => {
          console.log(err);
        })

      },
      add_new_palan() {
        this.$http.post('production/product/selproBaiGongDan?proSige_id=' + this.proDisOrder.proSige_id).then(res => {
          if (res.data) {
            var item = res.data;
            for (var i = 0; i < item.length; i++) {
              item[i].gongShiNum = (item[i].gongShiNum * this.proDisOrder.num);
              item[i].gScount = item[i].gongShiNum * item[i].unitGSPrice;
              for (var j = 0; j < item[i].pdoProcessWuLiaos.length; j++) {
                item[i].pdoProcessWuLiaos[j].processesNum =
                  item[i].pdoProcessWuLiaos[j].processesNum * this.proDisOrder.num;
                item[i].pdoProcessWuLiaos[j].count = item[i].pdoProcessWuLiaos[j].price *
                  item[i].pdoProcessWuLiaos[j].processesNum;
                item[i].wlcount = item[i].wlcount + item[i].pdoProcessWuLiaos[j].count;
              }
              this.proDisOrder.gongShiPrice = this.proDisOrder.gongShiPrice + item[i].gScount;
              this.proDisOrder.wuliaoSumPrice = this.proDisOrder.wuliaoSumPrice + item[i].wlcount;
            }
            this.tableData2 = item;
            console.log(this.tableData2);
          }
        }).catch(err => {
          console.log(err);
        })
      },
      addpgd() {
        var data = this.multipleSelection;

        var falg = false;
        for (var i = 0; i < data.length; i++) {
          for (var j = 0; j < data.length; j++) {
            if (data[j].proSige_id != data[i].proSige_id) {
              falg = true;
              //请选择产品编号一致的生产计划明细记录，
              this.$message.error('请选择产品编号一致的生产计划明细记录');
              return;
            }
          }
        }
        if (!falg) {
          if (data.length == 1) {
            var index = this.tableData.findIndex(d => {
              if (data[0].newpro_id == d.newpro_id) {
                return true;
              }
            })
            //产品编号 ,产品名称 生产单价  数量
            this.proDisOrder.proSige_id = this.tableData[index].proSige_id;
            this.proDisOrder.pName = this.tableData[index].pName;
            this.proDisOrder.sumPrice = this.tableData[index].sumPrice;
            this.proDisOrder.num = this.tableData[index].num;
            this.proDisOrder.newpro_id = this.tableData[index].newpro_id;
          } else {
            var num = 0;
            for (var i = 0; i < this.multipleSelection.length; i++) {
              num = num + this.multipleSelection[i].num;
            }
            this.proDisOrder.proSige_id = this.multipleSelection[0].proSige_id;
            this.proDisOrder.pName = this.multipleSelection[0].pName;
            this.proDisOrder.sumPrice = this.multipleSelection[0].sumPrice;
            this.proDisOrder.num = num;
            this.proDisOrder.newpro_id = this.multipleSelection[0].newpro_id;
          }
          this.proDisOrder.registrant = 'ademin';
          this.proDisOrder.regTime = this.getNewDate();
          this.dialogVisible = true;
        }

      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
          this.multipleSelection = [];

        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = [];
        for (var i = 0; i < val.length; i++) {
          this.multipleSelection.push(val[i])
        }
        console.log(this.multipleSelection);

      },
      GetOnline(pageNum, pageSize) {
        var data = new URLSearchParams();
        data.append("pageNum", pageNum);
        data.append("pageSize", pageSize);
        this.$http.post('production/product/selNewPlanByPager', data).then(res => {
          this.pageNum = res.data.pageNum;
          this.pageSize = res.data.pageSize;
          this.total = res.data.total;
          this.tableData = res.data.rows;
        }).catch(err => {
          console.log(err);
        })
      },
      getNewDate() {
        var date = new Date();
        console.log(date);
        var transverse = "-";
        var Verticalpoint = ":";
        var month = date.getMonth() + 1; //获取月份
        var strDate = date.getDate(); //获取具体的日期
        var strHour = date.getHours(); //获取...钟点
        var strMinute = date.getMinutes(); //获取分钟数
        var strSeconde = date.getSeconds(); //获取秒钟数
        //判断获取月份 、 具体的日期 、...钟点、分钟数、秒钟数 是否在1~9
        //如果是则在前面加“0”
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        console.log(month);
        if (strDate >= 1 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        if (strHour >= 1 && strHour <= 9) {
          strHour = "0" + strHour
        }
        console.log(strHour);
        if (strMinute >= 1 && strMinute <= 9) {
          strMinute = "0" + strMinute;
        }

        if (strSeconde >= 1 && strSeconde <= 9) {
          strSeconde = "0" + strSeconde;
        }
        //时间日期字符串拼接
        var NewDate = date.getFullYear() + transverse + month + transverse + strDate + " " +
          strHour + Verticalpoint + strMinute + Verticalpoint + strSeconde;
        //返回拼接字符串
        return NewDate;
      },
      close() {
        this.toggleSelection();
        this.multipleSelection = [];
        this.dialogVisible = false
      }
    },
    mounted() {
      this.GetOnline(this.pageNum, this.pageSize);
    }
  }
</script>

<style scoped="scoped">
  * {
    padding: 0px;
    margin: 0px;
  }

  .el-drawer.ttb {
    background-color: red;
  }

  #table_f {
    margin-left: 3px;
    border-collapse: collapse;
    border-style: hidden;
    border-top: 1px solid #333333;
    border-left: 1px solid #333333;
    border-right: 3px solid #333333;
    border-bottom: 3px solid #333333;
    ;
  }

  #table_f th {

    padding-left: 5px;
    text-align: left;
    margin-left: 16px;
    width: 150px;
    height: 30px;
    background-color: #C0C4CC;
  }

  #table_f input {
    background-color: whitesmoke;
    display: block;
    width: 230px;
    font-size: 15px;
  }

  #table_f td {
    /* border: none; */

    width: 230px;
    height: 30px;
  }

  .input_01 {
    border-top: none;
    border-right: none;
    border-left: none;
  }

  .input_nav_01 {
    display: inline-block;
    width: 90px;
    height: 25px;
    margin-left: 342px;
    background-color: dodgerblue;
  }

  .color_01 {
    background-color: whitesmoke;
  }

  .span_01 {
    font-size: 14px;
  }

  .body_main {
    margin: 0px auto;
    width: 940px;
    height: 470px;
    background-color: white;
    margin-top: 15px;
    border-top: 1px solid #333333;
    border-left: 1px solid #333333;
    border-right: 3px solid #333333;
    border-bottom: 3px solid #333333;
  }
</style>
